<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-在浏览器中使用art-tempalte</title>
</head>

<body>
    <!-- 注意：在浏览器中需要引用lib/template-web.js文件
    强调：模板引擎不关心你得字符串内容,只关心自己能认识的模板标记语法，例如{{}}
    {{}}语法被称为mustach语法 -->
    <script src="node_modules/art-template/lib/template-web.js">

    </script>
    <!-- <script type="text/template" id="tpl">
        大家好，我叫:{{name}}
        我今年{{ age }}岁了
        我来自{{ provice }}
        我喜欢: {{ each hobbies }} {{ $value }} {{/each}}
    </script> -->
    <script type="text/template" id="tpl">
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <p>大家好，我叫:{{name}}</p>
            <p>我今年{{ age }}岁了</p>
            <h1>我来自{{ h1rovice }}</h1>        
            <p>我喜欢: {{ each hobbies }} {{ $value }} {{/each}}</p>
        </body>
        </html>
    </script>
    <script>
        var ret = template('tpl', {
            name: 'jack',
            age: 18,
            provice: '广州市',
            hobbies: [
                '写代码',
                '唱歌',
                '打游戏'
            ]
        })
        console.log(ret)
    </script>
</body>

</html>